

/*
 * Initialise les évènements du document.
 */
$(document).ready(function () {
    $("#new_game").bind("click",restartGame);
    $("#notification").empty();
    $(".coda-slider-wrapper").show();
    $("#submitbutton").attr("disabled",true);
    bindElements();
    $("#form_game").bind("submit",startGame);
    $("#pseudo").bind("keyup",checkPseudo);
    $('#results tr').each(function(){
        $("#results tbody").find("td:last").fadeOut(250);
    });
    $('#coda-slider').codaSlider({
        autoHeight: false,
        dynamicArrows : false
    });
    // On affiche le retour au haut de la page en cas de scroll
    $(window).scroll(function() {
        if($(window).scrollTop() < 200){
            $('#arrow').fadeOut("slow");
        } else {
            if($(window).scrollTop() > 200){
                $('#arrow').fadeIn("slow");
            }
            
        }
    });
});

/**
 * Méthode réalisant la connexion avec le serveur
 * pour démarrer le jeu (demande la création d'une session)
 */
function startGame(){
    $.ajax({
        type: "POST",
        url: "../server/start_game.php",
        data: "pseudo=" + $("#pseudo").val(),
        async: false,
        success: function(msg){
            if(!msg){
                displayNotification("Le serveur ne semble pas répondre...",true);
            }else{
                // On cache le formulaire d'inscription et on affiche le jeu
                $("#form_game").fadeOut(1000, function(){
                    $("#game").fadeIn(1000, null);
                    $("#results").fadeIn(1000, null);
                    $("#score").fadeIn(1000, null);
                    $("#game_result").fadeIn(1000, null);
                    $("#menu").fadeIn(1000, null);
                    centerScore();
                    $(window).resize(function(){
                        centerScore();
                    });
                });
            }       
        },
        fail: function(msg){
            displayNotification("Le serveur ne semble pas répondre...",true);
        }
    });
    
    return false;
}


/**
 * Méthode réalisant la connexion avec le serveur
 * pour redémarrer le jeu (Fais une requête au serveur pour remettre
 * les scores à 0)
 */
function restartGame(){
    $.ajax({
        type: "POST",
        url: "../server/start_game.php",
        data: "init=true",
        async: false,
        success: function(msg){
            if(!msg){
                displayNotification("Le serveur ne semble pas répondre...",true);
            }else{
                // Initialise le jeu coté client.
                initGame();
            }       
        },
        fail: function(msg){
            displayNotification("Le serveur ne semble pas répondre...",true);
        }
    });
}

/**
 * Initialise le jeu coté client. (remet les scores à 0, vide le tableau
 * des coups joué et réaffiche les éléments du jeux)
 */
function initGame(){
    $("#computer_score img").attr("src","img/0computer.png");
    $("#computer_score img").attr("alt","0");
    $("#player_score img").attr("src","img/0player.png");
    $("#player_score img").attr("alt","0");
    $("#game_result").empty();
    $("#game_result").append('Joueur: 0 - Ordinateur: 0<span class="new_game" onclick="restartGame()">Nouvelle partie</span>');
    $("#tresults").empty();
    $("#game").css({
        'background-image': 'url(img/ring.png)'
    });
    $("#game").show(500, function(){
        $("#player_bloc").show(500);
        $("#computer_bloc").show(500);
        $("#player_score").show(500);
        $("#computer_score").show(500);
    });
}

/**
 * Centre le score du ring
 */
function centerScore(){
    var position = $("#game").position();
    $("#player_score").css("left",position.left + 260 + "px");
    $("#player_score").css("top", position.top + 130 + "px");
    $("#computer_score").css("left", position.left + 430 + "px");
    $("#computer_score").css("top", position.top + 130 + "px");
}

/**
 * Méthode qui se déclenche à la suite de la séléction d'un élément du jeu.
 * Analyse le résultat du duel retourné par le serveur et met à jour l'interface
 */
function elementClicked(){
    unbindElements()
    $.ajax({
        type: "POST",
        url: "../server/play.php",
        data: "choice=" + $(this).attr("id"),
        async: false,
        success: function(msg){
            //transformation du message du serveur en tableau
            var arrayResult = msg.split(":");
            var type = parseInt(arrayResult[0]);
            
            //si erreur
            if(type == -1){
                // notification
                displayNotification(arrayResult[2], false);
            // si le message décris un coup ou le gain d'un des joueur
            }else if(type == 0 || type == 1 || type == 2){
                var pseudo = arrayResult[1];
                var player_round= parseInt(arrayResult[2], 0);
                var computer_round = parseInt(arrayResult[3], 0);
                var player_score = parseInt(arrayResult[4], 0);
                var computer_score = parseInt(arrayResult[5], 0);
                var player_choice = arrayResult[6];
                var computer_choice = arrayResult[7];
                var result = parseInt(arrayResult[8]);
                
                
                // Si le score du joueur est égal à 0 et qu'il a gagné le coup
                if(player_score == 0 && result == 1){
                    // On met à jour le score du joueur sur le ring
                    $("#player_score img").attr("src", "img/2player.png");
                    $("#player_score img").attr("alt", "2")
                    // Si personne n'a gagné la partie
                    if(type != 1 && type != 2){
                        // on remet le score à 0
                        setZeroScore();
                    }else{
                        // sinon on cache le score
                        $("#player_score,#computer_score").hide();
                    }
                // Si le score de l'ordinateur est égal à 0 et qu'il a gagné le coup
                }else if(computer_score == 0 && result == -1){
                    $("#computer_score").attr("src", "img/2computer.png");
                    $("#computer_score").attr("alt", "2");
                    // Si personne n'a gagné la partie
                    if(type != 1 && type != 2){
                        //  on remet le score à 0
                        setZeroScore();
                    }else{
                        // sinon on cache le score
                        $("#player_score,#computer_score").hide();
                    }
               
                }else{ 
                    // Dans les autres cas, on affiche le score correspondant à la
                    // réponse du serveur
                    $("#player_score img").attr("src", "img/" + player_score + "player.png");
                    $("#player_score img").attr("alt", player_score);
                    $("#computer_score img").attr("src", "img/" + computer_score + "computer.png");
                    $("#computer_score img").attr("alt", computer_score);
                }                
                
                // On affiche le résultat des manches
                $("#game_result").empty();
                $("#game_result").append("Joueur: " + player_round + " - Ordinateur: " + computer_round);
                
                // On ajoute une ligne dans le tableau en fonction du résultat du
                // dernier coup
                if(result == 1){
                    $("#tresults").append('<tr class="win"><td><img class="small_img" src="img/player_' + player_choice + '.png" alt="' + player_choice + '"></td><td><img class="small_img" src="img/computer_' + computer_choice + '.png" alt="' + computer_choice + '"></td></tr>');
                }else if(result == 0){
                    $("#tresults").append('<tr class="draw"><td><img class="small_img" src="img/player_' + player_choice + '.png" alt="' + player_choice + '"></td><td><img class="small_img" src="img/computer_' + computer_choice + '.png" alt="' + computer_choice + '"></td></tr>');
                }else{
                    $("#tresults").append('<tr class="lose"><td><img class="small_img" src="img/player_' + player_choice + '.png" alt="' + player_choice + '"></td><td><img class="small_img" src="img/computer_' + computer_choice + '.png" alt="' + computer_choice + '"></td></tr>');
                }
                
                // Si le joueur a gagné la partie
                if(type == 1){
                    // on retire tous les évènements déclencheurs
                    unbindElements();
                    // on affiche un message de remerciement
                    $("#game_result").append(" Bravo " + pseudo + ", vous avez gagné !");

                    // on affiche l'image du vainqueur et on cache
                    // le jeu
                    $('#game')
                    .animate({
                        opacity: 0
                    }, 'slow', function() {
                        $(this)
                        .css({
                            'background-image': 'url(img/winner.jpeg)'
                        })
                        .animate({
                            opacity: 1
                        });
                        $("#player_bloc").hide(500);
                        $("#computer_bloc").hide(500);
                        $("#player_score").hide(500);
                        $("#computer_score").hide(500);
                        
                    });

                // Si l'ordinateur a gagné la partie
                }else if(type == 2){
                    // on retire tous les évènements déclencheurs
                    unbindElements();
                    // on affiche un message de remerciement
                    $("#game_result").append(" Désolé " + pseudo + ", vous avez perdu...");
                    // on affiche l'image du perdant et on cache
                    // le jeu
                    $('#game')
                    .animate({
                        opacity: 0
                    }, 'slow', function() {
                        $(this)
                        .css({
                            'background-image': 'url(img/loser.jpeg)'
                        })
                        .animate({
                            opacity: 1
                        });
                        $("#player_bloc").hide(500);
                        $("#computer_bloc").hide(500);
                        $("#player_score").hide(500);
                        $("#computer_score").hide(500);
                    });
                }
                // On crée le bouton pour rejouer
                $("#game_result").append('<span class="new_game" onclick="restartGame()">Nouvelle partie</span>');
            }else{
                // sinon, le type de message est inconnu
                displayNotification("Type de message serveur inconnu", true);
            }
            
            
            // Animation element joueur
            movePlayerElement(player_choice);
            // Animation element computer
            moveComputerElement(computer_choice);
            // On anime le jeu en fonction du résultat
            if(result == 1){
                moveGoodElementPlayer(player_choice);
                moveBadElementComputer(computer_choice);
            }else if(result == 0){
                moveBadElementPlayer(player_choice);
                moveBadElementComputer(computer_choice);
            }else if(result == -1){
                moveBadElementPlayer(player_choice);
                moveGoodElementComputer(computer_choice);
            }
            // On relance les déclencheurs
            bindElements();

        },
        fail: function(msg){
            alert( "Le serveur ne semble pas répondre...",true);
        }
    });
    return false;
}

/**
 * Supprime les déclencheurs sur les évènements du jeu
 */
function unbindElements(){
    $(".element").unbind("click");
}

/**
 * Active les déclencheurs sur les évènements du jeu
 */
function bindElements(){
    $(".element").bind("click", elementClicked);
}

/**
 * Remet le score de la manche à 0-0
 */
function setZeroScore(){
    $("#player_score,#computer_score").fadeOut(1500, function(){
        $("#player_score").attr("src", "img/0player.png");
        $("#player_score").attr("alt", "0");
        $("#computer_score").attr("src", "img/0computer.png");
        $("#computer_score").attr("alt", "0");
        $("#player_score").fadeIn(1500, null);
        $("#computer_score").fadeIn(1500, null);
    });
}




/**
 * Affiche une notification
 */
function displayNotification(msg, disappears){
    var notification = $("#notification");
    notification.html("<p>" + msg + "</p>");
    notification.show("slide",{},200);
    if(disappears){
        notification.fadeOut(1000, null); 
    }
}

/**
 * Cache les notifications
 */
function hideNotification(){
    $("#notification").hide();
}

/**
 * Vérifie le pseudo. Renvoie vrai si le pseudo est valide
 */
function checkPseudo(){
    var pseudo = $("#pseudo");
    // Si le pseudo n'est pas valide
    if(!(/^[a-zA-Z0-9]+$/.test(pseudo.val()))){
        // on affiche une notification
        displayNotification("Le pseudo n'est pas valide", false);
        // on désactive le bouton de validation de formulaire
        $("#submitbutton").attr("disabled",true);
    }else{
        // On cache les notifications
        hideNotification();
        $("#submitbutton").attr("disabled",false);
    }
}

/**
 * Anime l'élément du joueur qui va allé sur le ring
 */
function movePlayerElement(choice){
    var top = 0;
    // Si cailloux
    if(choice == "rock"){
        top = 100;
        $("#paper,#scissors").animate({
            "left" : "-=100px"
        },"slow");
    // Si papier
    }else if(choice == "paper"){
        top = 0;
        $("#rock,#scissors").animate({
            "left" : "-=100px"
        },"slow");
    // Si ciseaux
    }else if(choice == "scissors"){
        top = -100;
        $("#rock,#paper").animate({
            "left" : "-=100px"
        },"slow");
    // Sinon, erreur
    }else{
        displayNotification("Mouvement élément joueur inexistant (movePlayerElement)", true);
    }
    // On anime l'élément
    $("#"+choice).animate({
        "left" : "+=280px",
        "top" : "+=" + top
    },"slow");
}

/**
 * Anime l'élément de l'ordinateur qui va allé sur le ring
 */
function moveComputerElement(computerChoice){
    var top = 0;
    // Si cailloux
    if(computerChoice == "rock"){
        top = 100;
        $("#paper_computer,#scissors_computer").animate({
            "left" : "+=100px"
        },"slow");
    // Si papier
    }else if(computerChoice == "paper"){
        top = 0;
        $("#rock_computer,#scissors_computer").animate({
            "left" : "+=100px"
        },"slow");
    // Si ciseaux
    }else if(computerChoice == "scissors"){
        top = -100;
        $("#rock_computer,#paper_computer").animate({
            "left" : "+=100px"
        },"slow");
    // Sinon erreur
    }else{
        displayNotification("Mouvement élément ordinateur inexistant (moveComputerElement)", true);
    }
    // On anime l'élément
    $("#"+computerChoice+"_computer").animate({
        "left" : "-=280px",
        "top" : "+=" + top
    },"slow");
}


/**
 * Anime un élément perdant du joueur
 */
function moveBadElementPlayer(element){
    // On fait descendre la pièce
    $('#'+element).animate({
        "top" : '+=50px',
        "opacity" : "0"
    }, "slow");
    // Si cailloux
    if(element == "rock"){
        $('#rock').animate({
            "left" : "-=280px",
            "top" : "-=150px",
            "opacity" : 1
        }, "slow");
        $("#paper,#scissors").animate({
            "left" : "+=100px"
        },1000);
    // Si papier
    }else if(element == "paper"){
        $('#paper').animate({
            "left" : "-=280px",
            "top" : "-=50px",
            "opacity" : 1
        }, "slow");
        $("#rock,#scissors").animate({
            "left" : "+=100px"
        },1000);
    // Si ciseaux
    }else if(element == "scissors"){
        $('#scissors').animate({
            "left" : "-=280px",
            "top" : "+=50px",
            "opacity" : 1
        }, "slow");
        $("#rock,#paper").animate({
            "left" : "+=100px"
        },1000);
    // Sinon erreur
    }else{
        displayNotification("Mouvement perdant élément joueur inexistant (moveBadElementPlayer)", true);
    }
    
}
/**
 * Anime un élément gagnant du joueur
 */
function moveGoodElementPlayer(element){
    // On augmente la taille de l'élément
    $('#'+element).animate({
        "height" : '+=40px',
        "width" : "+=40px",
        "left" : "-=20px",
        "top" : "-=20px"
    }, "slow");
    // On diminu la taille de l'élément
    $('#'+element).animate({
        "height" : '-=40px',
        "width" : "-=40px",
        "left" : "+=20px",
        "top" : "+=20px"
    }, "slow");
    // Si cailloux
    if(element == "rock"){
        $('#rock').animate({
            "left" : "-=280px",
            "top" : "-=100",
            "opacity" : 1
        }, "slow");
        $("#paper,#scissors").animate({
            "left" : "+=100px"
        },1000);
    // Si papier
    }else if(element == "paper"){
        $('#paper').animate({
            "left" : "-=280px",
            "opacity" : 1
        }, "slow");
        $("#rock,#scissors").animate({
            "left" : "+=100px"
        },1000);
    // Si ciseaux
    }else if(element == "scissors"){
        $('#scissors').animate({
            "left" : "-=280px",
            "top" : "+=100",
            "opacity" : 1
        }, "slow");
        $("#rock,#paper").animate({
            "left" : "+=100px"
        },1000);
    // Sinon erreur
    }else{
        displayNotification("Mouvement gagnant élément joueur inexistant (moveGoodElementPlayer)", true);
    }
}
/**
 * Anime un élément perdant de l'ordinateur
 */
function moveBadElementComputer(element){
    // On fait descendre la pièce
    $('#'+element+"_computer").animate({
        "top" : '+=50px',
        "opacity" : "0"
    }, "slow");
    // Si cailloux
    if(element == "rock"){
        $("#rock_computer").animate({
            "left" : "+=280px",
            "top" : "-=150px",
            "opacity" : 1
        }, "slow");
        $("#paper_computer,#scissors_computer").animate({
            "left" : "-=100px"
        },1000);
    // Si papier
    }else if(element == "paper"){
        $("#paper_computer").animate({
            "left" : "+=280px",
            "top" : "-=50px",
            "opacity" : 1
        }, "slow");
        $("#rock_computer,#scissors_computer").animate({
            "left" : "-=100px"
        },1000);
    // Si ciseaux
    }else if(element == "scissors"){
        $("#scissors_computer").animate({
            "left" : "+=280px",
            "top" : "+=50px",
            "opacity" : 1
        }, "slow");
        $("#rock_computer,#paper_computer").animate({
            "left" : "-=100px"
        },1000);
    // Sinon erreur
    }else{
        displayNotification("Mouvement perdant élément ordinateur inexistant (moveBadElementComputer)", true);
    }
}


/**
 * Anime un élément gagnant de l'ordinateur
 */
function moveGoodElementComputer(element){
    // On augmente la taille de l'élément
    $('#'+element+"_computer").animate({
        "height" : '+=40px',
        "width" : "+=40px",
        "left" : "-=20px",
        "top" : "-=20px"
    }, "slow");
    // On diminue la taille de l'élément
    $('#'+element+"_computer").animate({
        "height" : '-=40px',
        "width" : "-=40px",
        "left" : "+=20px",
        "top" : "+=20px"
    }, "slow");
    // Si cailloux
    if(element == "rock"){
        $("#rock_computer").animate({
            "left" : "+=280px",
            "top" : "-=100",
            "opacity" : 1
        }, "slow");
        $("#paper_computer,#scissors_computer").animate({
            "left" : "-=100px"
        },1000);
    // Si papier
    }else if(element == "paper"){
        $("#paper_computer").animate({
            "left" : "+=280px",
            "opacity" : 1
        }, "slow");
        $("#rock_computer,#scissors_computer").animate({
            "left" : "-=100px"
        },1000);
    // Si ciseaux
    }else if(element == "scissors"){
        $("#scissors_computer").animate({
            "left" : "+=280px",
            "top" : "+=100",
            "opacity" : 1
        }, "slow");
        $("#rock_computer,#paper_computer").animate({
            "left" : "-=100px"
        },1000);
    // Sinon erreur
    }else{
        displayNotification("Mouvement gagnant élément ordinateur inexistant (moveGoodElementComputer)", true);
    }
}